<template>
  <div class="container">
    <div class="title">
      <p>重庆市驾校推荐</p>
    </div>

    <div class="four">
      <div class="item-box">
        <div class="top">
          <div class="top-left">
            <div class="one-part">
              <div style="width: 88px; height: 30px; font-size: 22px; color: #666666">长安驾校</div>
              <el-rate v-model="value" disabled show-score text-color="#ff9900" />
            </div>

            <div class="two-part">
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
            </div>
          </div>

          <div class="top-right">
            <div style="font-size: 30px; color: #ee4653">￥ 2686</div>
            <button style="width: 80px; height: 25px; border: none; border: 1px solid #e9e9e9; font-size: 14px; background-color: white">学车报名</button>
          </div>
        </div>

        <div class="last">
          <img style="width: 40px; height: 40px; margin-left: 20px" src="https://avatar-user.mc-cdn.cn/user-avatar/2024/01/23/00/50e77e43cc5f4484a40283f659e98f75.jpg!100x100" alt="" />
          <p style="height: 40px; color: #999999; font-size: 14px">四十多天拿证，课程安排合理</p>
        </div>
      </div>
      <div class="item-box">
        <div class="top">
          <div class="top-left">
            <div class="one-part">
              <div style="width: 88px; height: 30px; font-size: 22px; color: #666666">长安驾校</div>
              <el-rate v-model="value" disabled show-score text-color="#ff9900" />
            </div>

            <div class="two-part">
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
            </div>
          </div>

          <div class="top-right">
            <div style="font-size: 30px; color: #ee4653">￥ 2686</div>
            <button style="width: 80px; border: none; border: 1px solid #e9e9e9; font-size: 14px; background-color: white">学车报名</button>
          </div>
        </div>

        <div class="last">
          <img style="width: 40px; height: 40px; margin-left: 20px" src="https://avatar-user.mc-cdn.cn/user-avatar/2024/01/23/00/50e77e43cc5f4484a40283f659e98f75.jpg!100x100" alt="" />
          <p style="height: 40px; color: #999999; font-size: 14px">四十多天拿证，课程安排合理</p>
        </div>
      </div>
      <div class="item-box">
        <div class="top">
          <div class="top-left">
            <div class="one-part">
              <div style="width: 88px; height: 30px; font-size: 22px; color: #666666">长安驾校</div>
              <el-rate v-model="value" disabled show-score text-color="#ff9900" />
            </div>

            <div class="two-part">
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
            </div>
          </div>

          <div class="top-right">
            <div style="font-size: 30px; color: #ee4653">￥ 2686</div>
            <button style="width: 80px; border: none; border: 1px solid #e9e9e9; font-size: 14px; background-color: white">学车报名</button>
          </div>
        </div>

        <div class="last">
          <img style="width: 40px; height: 40px; margin-left: 20px" src="https://avatar-user.mc-cdn.cn/user-avatar/2024/01/23/00/50e77e43cc5f4484a40283f659e98f75.jpg!100x100" alt="" />
          <p style="height: 40px; color: #999999; font-size: 14px">四十多天拿证，课程安排合理</p>
        </div>
      </div>
      <div class="item-box">
        <div class="top">
          <div class="top-left">
            <div class="one-part">
              <div style="width: 88px; height: 30px; font-size: 22px; color: #666666">长安驾校</div>
              <el-rate v-model="value" disabled show-score text-color="#ff9900" />
            </div>

            <div class="two-part">
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
              <div class="item">
                <div class="icon" style="display: flex; align-items: center; justify-content: center">
                  <el-icon :size="20">
                    <Edit />
                  </el-icon>
                </div>
                <span style="font-size: 14px; color: #666666">口碑好</span>
              </div>
            </div>
          </div>

          <div class="top-right">
            <div style="font-size: 30px; color: #ee4653">￥ 2686</div>
            <button style="width: 80px; border: none; border: 1px solid #e9e9e9; font-size: 14px; background-color: white">学车报名</button>
          </div>
        </div>

        <div class="last">
          <img style="width: 40px; height: 40px; margin-left: 20px" src="https://avatar-user.mc-cdn.cn/user-avatar/2024/01/23/00/50e77e43cc5f4484a40283f659e98f75.jpg!100x100" alt="" />
          <p style="height: 40px; color: #999999; font-size: 14px">四十多天拿证，课程安排合理</p>
        </div>
      </div>
    </div>

    <div class="btn" style="width: 100%; display: flex; justify-content: center; margin-top: 20px">
      <div class="btn-content">查看更多</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(5)
</script>

<style scoped lang="scss">
.container {
  width: 1200px;
  margin: 60px auto;

  .title {
    width: 100%;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      width: 300px;
      height: 41px;
      font-size: 30px;
      color: #333333;
      text-align: center;
    }
  }

  .four {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item-box {
      width: 585px;
      border: 1px solid #e9e9e9;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 30px;
      margin-top: 30px;
      .top {
        width: 524px;
        display: flex;
        align-items: center;
        gap: 25px;
        margin-left: 50%;
        transform: translateX(-50%);

        .top-left {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 5px;
          border-right: 1px solid #e9e9e9;
          .one-part {
            width: 305px;
            display: flex;
            gap: 10px;
          }

          .two-part {
            display: flex;
            gap: 5px;
            .item {
              display: flex;
              width: 62px;
              height: 20px;
              align-items: center;
            }
          }
        }

        .top-right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 4px;
        }
      }

      .last {
        width: 524px;
        height: 80px;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 30px 0;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .btn {
    .btn-content {
      font-size: 16px;
      color: #999999;
      width: 280px;
      text-align: center;
      line-height: 48px;
      border: 1px solid #e9e9e9;
    }

    .btn-content:hover {
      cursor: pointer;
      color: #37b5f8;
      border: 1px solid #37b5f8;
    }
  }
}
</style>
